
const defaultContentHeight: number = 50;
const { ccclass, property } = cc._decorator;

@ccclass
export default class scrollView extends cc.Component {

    @property(cc.Node)
    content: cc.Node = null;

    // LIFE-CYCLE CALLBACKS:
    private layout: cc.Layout = null;

    private topNode: cc.Node = null;
    private botNode: cc.Node = null;

    private topPos: cc.Vec2 = null;
    private botPos: cc.Vec2 = null;

    private botInvisibleArr: any[] = [];
    private topInvisibleArr: any[] = [];


    private contentHeight: number = defaultContentHeight;
    //----------------------------------
    scrollView: cc.ScrollView = null;

    onLoad() {
        this.scrollView = this.node.getComponent(cc.ScrollView);
        this.layout = this.content.getComponent(cc.Layout);
    }

    onEnable() {
        this.node.on('bounce-bottom', this.onScrollBottom, this);
        this.node.on('bounce-top', this.onScrollTop, this);
        this.content.on(cc.Node.EventType.CHILD_ADDED, this.OnAddedChild, this);
        this.content.on(cc.Node.EventType.CHILD_REMOVED, this.OnRemovedChild, this);
        this.onShow();
        this.scheduleOnce(this.init);
    }
    onDisable() {
        this.node.off('bounce-bottom', this.onScrollBottom, this);
        this.node.off('bounce-top', this.onScrollTop, this);
        this.content.off(cc.Node.EventType.CHILD_ADDED, this.OnAddedChild, this);
        this.content.off(cc.Node.EventType.CHILD_REMOVED, this.OnRemovedChild, this);
        this.onHide();
    }

    // start() {
    // }

    // update (dt) {}
    init() {
        this.topPos = this.node.convertToWorldSpaceAR(cc.v2()).addSelf(cc.v2(0, this.node.height * (1 - this.node.anchorY)));
        this.botPos = this.node.convertToWorldSpaceAR(cc.v2()).subSelf(cc.v2(0, this.node.height * this.node.anchorY));
        this.initContent();
    }
    initContent() {
        let items = this.content.children;
        if (!items.length) return;
        this.topNode = items[0];
        this.botNode = items[items.length - 1];
        for (let i = items.length - 2; i >= 0; --i) {
            let item = items[i];
            let w_msg_pos = item.convertToWorldSpaceAR(cc.v2());
            if (w_msg_pos.y - item.height * item.anchorY - this.layout.spacingY > this.topPos.y) {
                item.children[0].active = false;
            }
            else {
                this.topNode = item;
            }
        }
    }
    isOutOfLine() {
        return this.contentHeight > this.content.parent.height;
    }
    updateTopBottomLine() {
        this.topPos = this.node.convertToWorldSpaceAR(cc.v2()).addSelf(cc.v2(0, this.node.height * (1 - this.node.anchorY)));
        this.botPos = this.node.convertToWorldSpaceAR(cc.v2()).subSelf(cc.v2(0, this.node.height * this.node.anchorY));
    }
    updateContent(item: cc.Node, dir: boolean = true) {
        if (!item) return false;
        let d = 1;
        dir || (d = -d);
        this.contentHeight += (item.height + this.layout.spacingY) * d;
        return true;
    }
    resetContent() {
        this.contentHeight = defaultContentHeight;
    }

    onScrollEvent(evt: cc.ScrollView) {
        let items = this.content.children;
        if (!items.length) return;
        if (!this.topNode || !this.topNode.active)
            this.topNode = items[0];
        if (!this.botNode || !this.botNode.active)
            this.botNode = items[items.length - 1];
        let w_botNode_pos = this.botNode.convertToWorldSpaceAR(cc.v2());
        let w_topNode_pos = this.topNode.convertToWorldSpaceAR(cc.v2());

        //top
        //超出屏幕
        if (w_topNode_pos.y - this.topNode.height * this.topNode.anchorY - this.layout.spacingY > this.topPos.y) {
            let index = this.topNode.getSiblingIndex();
            let newTopNode = items[index + 1];
            if (newTopNode) {
                this.topNode.children[0].active = false;
                this.topNode = newTopNode;
            }
        }
        //全在屏幕内
        else if (w_topNode_pos.y + this.topNode.height * (1 - this.topNode.anchorY) + this.layout.spacingY < this.topPos.y) {
            let index = this.topNode.getSiblingIndex();
            let newTopNode = items[index - 1];
            if (newTopNode) {
                newTopNode.children[0].active = true;
                this.topNode = newTopNode;
            }
            else {
                this.onScrollTop();
            }
        }

        //bottom
        if (w_botNode_pos.y + this.botNode.height * (1 - this.botNode.anchorY) + this.layout.spacingY < this.botPos.y) {
            let index = this.botNode.getSiblingIndex();
            let newBotNode = items[index - 1];
            if (newBotNode) {
                this.botNode.children[0].active = false;
                this.botNode = newBotNode;
            }
        }
        else if (w_botNode_pos.y - this.botNode.height * this.botNode.anchorY - this.layout.spacingY > this.botPos.y) {
            let index = this.botNode.getSiblingIndex();
            let newBotNode = items[index + 1];
            if (newBotNode) {
                newBotNode.children[0].active = true;
                this.botNode = newBotNode;
            }
            else {
                //
                this.onScrollBottom();
            }
        }
    }
    onScrollBottom() {
        cc.vv.eventCustom.emit('showNewItem', 10);
    }
    onScrollTop() {
    }
    private OnAddedChild(newNode: cc.Node) {
        // cc.log('子节点 + 1');
        // cc.log(newNode);
    }
    private OnRemovedChild(node: cc.Node) {
        node && this.updateContent(node, false);
    }

    onShow() {
        let widget = this.node.getComponent(cc.Widget);
        widget.updateAlignment();
    }
    onHide() {
        this.resetContent();
    }
}